<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{$title}}</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <script src="/static/layui/layui.js"></script>
</head>

<body style="padding: 10px;">
  <!-- 搜索框 -->
  <div class="layui-form">
    <div class="layui-form-item" style="margin-bottom: 0;">
      {!!$search!!}
    </div>
  </div>

  <!-- 数据表格 -->
  <table id="dataTable" lay-filter="dataTable"></table>

  <script>
    layui.use(['table', 'form', 'upload', 'layedit'], function() {
      let $ = layui.jquery,
        table = layui.table,
        form = layui.form,
        upload = layui.upload;

      //渲染表格
      table.render({
        elem: '#dataTable',
        toolbar: '#toolbar',
        defaultToolbar: ['filter', 'print', 'exports'],
        height: $('button[lay-filter="search"]').length ? 'full-85' : 'full-40',
        cellMinWidth: 80,
        //数据接口
        url: '{{$prefix}}/index',
        //开启分页
        page: true,
        title: '{{$title}}',
        //搜索
        where: {
          search: ""
        },
        //表头
        cols: [
          [{
            checkbox: true,
            fixed: 'left'
          }, {
            field: 'id',
            title: 'ID',
            width: 80,
            sort: true
          }, {
            field: 'file_name',
            title: '文件名',
          }, {
            field: 'preview',
            title: '预览',
          }, {
            field: 'size',
            title: '大小',
            sort: true
          }, {
            field: 'status',
            title: '状态',
            sort: true
          }, {
            field: 'time',
            title: '时间',
            sort: true
          }, {
            title: '操作',
            align: 'center',
            width: 170,
            toolbar: '#databar'
          }]
        ]
      });

      // 搜索框事件
      form.on('submit(search)', function(data) {
        let field = data.field;
        //执行重载
        table.reload('dataTable', {
          where: {
            search: field
          }
        });
      });

      // 拖拽上传
      upload.render({
        elem: '#upload-drag',
        url: '{{$prefix}}/uploads', //改成您自己的上传接口
        size: '{{$size}}',
        exts: '{{$exts}}',
        data: {
          _token: '{{csrf_token()}}'
        },
        done: function(res) {
          layer.msg('上传成功');
          layui.$('#upload-drag-view').removeClass('layui-hide').find('img').attr('src', res.files.file);
        }
      });

      //头工具栏事件
      table.on('toolbar(dataTable)', function(obj) {
        let checkStatus = table.checkStatus(obj.config.id);
        let data = checkStatus.data;
        //批量删除
        if (obj.event === 'delAll') {
          if (data.length === 0) {
            return layer.msg('请选择数据');
          }
          layer.confirm('确定删除吗？', {
            icon: 3
          }, function(index) {
            let id = [];
            data.forEach(elem => {
              id.push(elem.id);
            });
            $.get('{{$prefix}}/del', {
              id
            }, function(res) {
              if (res.code) {
                return layer.msg(res.msg, {
                  icon: 2
                });
              }
              layer.msg(res.msg);
              table.reload('dataTable');
            }, 'json');
          });
        }
        //计算状态
        if (obj.event === 'calc') {
          layer.confirm('重新计算文件状态吗？', {
            icon: 3
          }, function(index) {
            layer.close(index);
            layer.load()
            $.get('{{$prefix}}/calc', {}, function(res) {
              layer.closeAll("loading");
              if (res.code) {
                return layer.msg(res.msg, {
                  icon: 2
                });
              }
              layer.msg(res.msg);
              table.reload('dataTable');
            }, 'json');
          });
        }
        //刷新
        if (obj.event === 'uploadAll') {
          layer.open({
            type: 1,
            title: '批量上传',
            shadeClose: true,
            shade: 0.3,
            area: ["280px", "360px"],
            content: $('#upload-drag'),
          });
        }
        //刷新
        if (obj.event === 'refresh') {
          table.reload('dataTable');
        }
      });

      //监听行工具事件
      table.on('tool(dataTable)', function(obj) {
        let data = obj.data;
        //删除行
        if (obj.event === 'del') {
          layer.confirm('真的删除行么？', {
            icon: 3
          }, function(index) {
            layer.close(index);
            $.get('{{$prefix}}/del', {
              id: data.id
            }, function(res) {
              if (res.code) {
                return layer.msg(res.msg, {
                  icon: 2
                });
              }
              obj.del();
              layer.msg(res.msg);
            }, 'json');
          });
        }
        //编辑行
        if (obj.event === 'edit') {
          layer.open({
            type: 2,
            title: '编辑',
            shadeClose: true,
            shade: 0.3,
            area: ["420px", "240px"],
            content: '{{$prefix}}/edit?id=' + data.id,
            success: function(layero, index) {
              form.on('submit(submit)', function(res) {
                let field = res.field;
                field.id = data.id;
                $.post('{{$prefix}}/save_edit', field, function(res) {
                  if (res.code) {
                    return layer.msg(res.msg, {
                      icon: 2
                    });
                  }
                  layer.msg(res.msg);
                  obj.update(field);
                  layer.close(index);
                }, 'json');
              });
            }
          });
        }
        //获取链接
        if (obj.event === 'link') {
          layer.alert(data.url);
        }
      });
    });
  </script>

  <!-- 头工具栏 -->
  <script type="text/html" id="toolbar">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
      <button class="layui-btn layui-btn-sm" lay-event="uploadAll">批量上传</button>
      <button class="layui-btn layui-btn-sm" lay-event="calc">计算状态</button>
      <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
    </div>
  </script>

  <!-- 行工具 -->
  <script type="text/html" id="databar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="link">链接</a>
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>

  <!-- 批量上传 -->
  <div class="layui-upload-drag" id="upload-drag" style="margin:10px 0 0 10px;display: none;">
    <i class="layui-icon layui-icon-upload"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="upload-drag-view">
      <hr>
      <img src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
  </div>

</body>

</html>